<template>
	<view class="radio-button">
		<view v-for="item in options" :key="item[valueKey]" class="radio-button-item"
			:class="{
				'radio-button-item--active': item[valueKey] === modelValue
			}"
			@click="handleClick(item)">
			<span>{{item[labelKey]}}</span>
		</view>
	</view>
</template>

<script setup name="RadioButton">
import { defineProps, defineEmits, toRefs } from 'vue'
const props = defineProps({
  modelValue: {
		type: [String, Number],
		default: ''
	},
	options: {
		type: Array,
		default: () => []
	},
	labelKey: {
		type: String,
		default: 'label'
	},
	valueKey: {
		type: String,
		default: 'value'
	}
})
const { modelValue, options, labelKey, valueKey } = toRefs(props)

const emits = defineEmits(['update:modelValue', 'change'])
const handleClick = (item) => {
	emits('update:modelValue', item[valueKey.value])
	emits('change', item[valueKey.value])
}

</script>

<style lang="scss" scoped>
	.radio-button {
		display: flex;
		align-items: center;
		.radio-button-item {
			padding: 3px 8px;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 12px;
			color: #333;
			border-radius: 3px;
			&--active {
				color: #fff;
				background-color: green;
			}
		}
	} 
</style>
